<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Grid Layout Example</title>
    <style>
      /* 全局样式 */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        font-weight: normal;
      }

      /* 网格容器样式 */
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr; /* 定义三列，第一列和第三列各占据剩余空间的四分之一，第二列占据剩余空间的二分之一 */
        grid-gap: 10px; /* 设置网格项之间的间隙 */
        padding: 10px; /* 设置内边距 */
        background-color: #f0f0f0; /* 背景颜色 */
        border: 1px solid #ccc; /* 边框 */
      }

      /* 网格项样式 */
      .item {
        background-color: #f0f0f0; /* 背景颜色 */
        padding: 20px; /* 内边距 */
        text-align: center; /* 文本居中 */
      }

      .item-1 {
        background-color: #ff8080; /* 第一项背景颜色 */
      }

      .item-2 {
        background-color: #80ff80; /* 第二项背景颜色 */
      }

      .item-3 {
        background-color: #8080ff; /* 第三项背景颜色 */
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="item item-1">Item 1</div>
      <div class="item item-2">Item 2</div>
      <div class="item item-3">Item 3</div>
    </div>
  </body>
</html>
